import ProTable, { ProColumns } from '@ant-design/pro-table';
import { Space, Tag } from 'antd';
import React from 'react';

import SystemModel from '@/models/system';
import { getFaultList, IProject, IRca } from '@/services/datareport/rca';
import { DatePicker } from '~/src/components/picker';

import RcaModel from './models';

const Rca = () => {
  const { fetchFaultLevel, fetchFaultTag } = RcaModel();
  const { fetchProjectList } = SystemModel();

  function getProjectNames(_: IProject[]): string {
    const projects = _.map((v: IProject) => v.project_name) || [];
    return projects.join('、');
  }

  const columns: ProColumns<IRca>[] = [
    {
      title: '排序',
      dataIndex: 'key',
      valueType: 'indexBorder',
      width: 48,
    },
    {
      title: '故障编号',
      dataIndex: 'fault_id',
      render: (_) => <a>{_}</a>,
    },
    {
      title: '故障名称',
      dataIndex: 'description',
    },
    {
      title: '故障等级',
      dataIndex: 'level_name',
      request: fetchFaultLevel,
      render: (_, record) => {
        const colors: Record<number, string> = {
          6: 'red',
          5: 'volcano',
          4: 'blue',
          3: 'green',
          2: '',
        };
        const level = record.level;
        return (
          <Space>
            {level && level !== -1 ? <Tag color={colors[level]}>{_}</Tag> : '-'}
          </Space>
        );
      },
    },
    {
      title: '提报人',
      dataIndex: 'create_user_name',
      search: false,
    },
    {
      title: '所属项目',
      dataIndex: 'project_list',
      request: fetchProjectList,
      render: (_, record) => getProjectNames(record.project_list || []),
    },
    {
      title: '影响项目',
      dataIndex: 'effect_project_list',
      request: fetchProjectList,
      render: (_, record) => getProjectNames(record.effect_project_list || []),
    },
    {
      title: '故障标签',
      dataIndex: 'tag_list',
      request: fetchFaultTag,
      render: (_, record) => {
        const tags: string[] = record.tag_list?.map((v) => v.tag_name) || [];
        return tags.join('、 ') || '-';
      },
    },
    {
      title: '上报时间',
      key: 'showTime',
      dataIndex: 'create_time',
      width: 140,
      valueType: 'date',
      sorter: true,
      renderFormItem: () => <DatePicker />,
    },
    {
      title: '持续时长',
      dataIndex: 'duration_time',
      width: 140,
      search: false,
    },
  ];

  return (
    <ProTable
      columns={columns}
      request={async (params, sorter, filter) => {
        const query = {
          ...filter,
          page_number: params.current,
          page_size: params.pageSize,
        };
        const { data } = await getFaultList(query);
        return {
          data: data.fault_list,
          total: data.total_size,
        };
      }}
      rowKey="id"
      search={{
        labelWidth: 'auto',
        defaultCollapsed: false,
      }}
      dateFormatter="string"
      toolbar={{
        title: 'RCA 列表',
      }}
    />
  );
};

export default Rca;
